<template>
  <div class="add-card">
    <header class="add-header">
      <el-page-header content="告警详情" @back="$router.back()" />
    </header>
    <main class="add-main">
      <div class="form-container">
        <div class="title">告警详情</div>
        <el-divider />
        <div class="form">
          <el-form :model="warningForm" label-width="100px">
            <el-form-item label="告警时间:" prop="warningTime">
              <span>{{ warningForm.warningTime }}</span>
            </el-form-item>
            <el-form-item label="一体杆名称:" prop="poleName">
              <span>{{ warningForm.poleName }}</span>
            </el-form-item>
            <el-form-item label="告警区域:" prop="areaName">
              <span>{{ warningForm.areaName }}</span>
            </el-form-item>
            <el-form-item label="一体杆编号:" prop="poleNumber">
              <span>{{ warningForm.poleNumber }}</span>
            </el-form-item>
            <el-form-item label="故障类型:" prop="errorType">
              <span>{{ warningForm.errorType }}</span>
            </el-form-item>
            <el-form-item label="处置状态:" prop="handleStatus">
              <span>{{ statusObj[warningForm.handleStatus] }}</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="form-container">
        <div class="title">告警处理</div>
        <div class="form">
          <el-form :model="warningForm" label-width="100px">
            <el-form-item label="处理人:" prop="handleUser">
              <span>{{ warningForm.handleUser }}</span>
            </el-form-item>
            <el-form-item label="联系方式:" prop="phonenumber">
              <span>{{ warningForm.phonenumber }}</span>
            </el-form-item>
            <el-form-item label="处理结果:" prop="handleResult">
              <span>{{ warningForm.handleResult }}</span>
            </el-form-item>
            <el-form-item label="完成时间:" prop="handleTime">
              <span>{{ warningForm.handleTime }}</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { getWarningDetailAPI } from '@/apis/rod'
export default {
  data() {
    return {
      // 车辆信息表单
      warningForm: {
        warningTime: '', // 告警时间
        errorType: '', // 故障类型
        poleName: '', // 一体杆名称
        poleNumber: '', // 一体杆编号
        areaName: '', // 告警区域
        handleStatus: null, // 状态
        handleUser: '', // 处理人
        phonenumber: '', // 联系方式
        handleResult: '', // 处理结果
        handleTime: ''// 完成时间
      },
      // 支付方式列表
      statusObj:
          {
            0: '未派单', 1: '已派单', 2: '已接单', 3: '已完成'
          }
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  }, created() {
    // 只有在有 id 编辑情况下再请求详情数据
    if (this.id) { this.getDetail() }
  },
  methods: {
    // 获取月卡详情数据
    async getDetail() {
      const res = await getWarningDetailAPI(this.id)
      console.log(res)
      this.warningForm = res.data
    }
  }
}
</script>
<style scoped lang="scss">
      .add-card {
        background-color: #f4f6f8;
        height: 100vh;

        .add-header {
          display: flex;
          align-items: center;
          padding: 0 20px;
          height: 64px;
          background-color: #fff;

          .left {
            span {
              margin-right: 4px;
            }
            .arrow{
              cursor: pointer;
            }
          }

          .right {
            text-align: right;
          }
        }

        .add-main {
          background: #f4f6f8;
          padding: 20px 130px;

          .form-container {
            background-color: #fff;

            .title {
              height: 60px;
              line-height: 60px;
              padding-left: 20px;
            }

            .form {
              margin-bottom: 20px;
              padding: 20px 65px 24px;

              .el-form {
                display: flex;
                flex-wrap: wrap;

                .el-form-item {
                  width: 50%;
                }
              }
            }
          }
          .preview{
            img{
              width: 100px;
            }
          }
        }
        ::v-deep .no-inner-border td {
          border: none;
        }

      }
</style>
